<template>
  <div>
    <div class="box">
      <div class="network leading-[40px]">功能说明</div>
      <div class="network leading-[40px]">操作</div>
    </div>
    <div class="box mt-[-1px]">
      <div class="network leading-[50px]">
        <span class="text-[red]">*</span> 网卡名称
      </div>
      <div class="network leading-[50px]">
        <el-select v-model="form.name" clearable @change="networkSelect">
          <el-option
            v-for="item in options"
            :key="item.name"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </div>
    </div>
    <div class="box mt-[-1px]">
      <div class="network leading-[50px]">
        <span class="text-[red]">*</span> 网络连接方式
      </div>
      <div class="network leading-[50px]">
        <el-select v-model="form.mode" clearable>
          <el-option
            v-for="item in modeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <div class="box mt-[-1px]">
      <div class="network leading-[50px]">IP地址</div>
      <div class="network leading-[50px]">
        <el-input
          v-model="form.ip"
          autocomplete="off"
          :disabled="form.mode === 'dhcp'"
        />
      </div>
    </div>
    <div class="box mt-[-1px]">
      <div class="network leading-[50px]">子网掩码</div>
      <div class="network leading-[50px]">
        <el-input
          v-model="form.mask"
          autocomplete="off"
          :disabled="form.mode === 'dhcp'"
        />
      </div>
    </div>
    <div class="box mt-[-1px]">
      <div class="network leading-[50px]">网关</div>
      <div class="network leading-[50px]">
        <el-input
          v-model="form.gateway"
          autocomplete="off"
          :disabled="form.mode === 'dhcp'"
        />
      </div>
    </div>
    <div class="box mt-[-1px]">
      <div class="network leading-[50px]">DNS</div>
      <div class="network leading-[50px]">
        <el-input
          v-model="form.dns"
          autocomplete="off"
          :disabled="form.mode === 'dhcp'"
        />
      </div>
    </div>
    <div class="box mt-[-1px]">
      <div class="network leading-[50px]">
        <span class="text-[red]">*</span> 摄像头发现网卡
      </div>
      <div class="network leading-[50px]">
        <el-select v-model="form.default_name" clearable>
          <el-option
            v-for="item in options"
            :key="item.name"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </div>
    </div>
    <el-button type="primary" class="mt-[16px]" @click="dialogVisible = true"
      >保存设置</el-button
    >
    <el-dialog v-model="dialogVisible" width="20%" top="30vh">
      <span><h4>此操作将重启设备，是否继续？</h4></span>
      <template #header="{ titleId, titleClass }">
        <div class="flex items-center">
          <IconifyIconOffline
            :icon="question16"
            width="24px"
            height="24px"
            class="text-[#da9a19] mr-[7px]"
          />
          <h4 :id="titleId" :class="titleClass">确定</h4>
        </div>
      </template>
      <div class="flex justify-between">
        <div />
        <div class="mt-[15px]">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submit"> 确定 </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getNetworkData, setNetworkData } from "@/api/system";
import { ElMessage, ElDialog } from "element-plus";
import question16 from "@iconify-icons/octicon/question-16";
import { networkoptionsList, networkFormType, optionsT } from "@/type/system";

const dialogVisible = ref<boolean>(false);
const options = ref<networkoptionsList[]>([]);
const modeOptions = ref<optionsT[]>([
  {
    label: "静态IP地址",
    value: "static"
  },
  {
    label: "动态IP地址",
    value: "dhcp"
  }
]);
const form = ref<networkFormType>({
  name: "",
  gateway: "",
  ip: "",
  mask: "",
  mode: "",
  dns: "",
  default_name: ""
});
onMounted(() => {
  getData();
});

const networkSelect = (): void => {
  const temporaryData = options.value.filter((item: networkoptionsList) => {
    return item.name === form.value.name;
  })[0];
  for (const key in temporaryData) {
    form.value[key] = temporaryData[key];
  }
};

const getData = async () => {
  const res = await getNetworkData();
  options.value = res.result.Interfaces;
  form.value.default_name = res.result.default_name;
  const temporaryData = options.value.filter((item: networkoptionsList) => {
    return item.name === form.value.default_name;
  })[0];
  for (const key in temporaryData) {
    form.value[key] = temporaryData[key];
  }
};

const submit = async () => {
  dialogVisible.value = false;
  if (
    form.value.mode != "" &&
    form.value.name != "" &&
    form.value.default_name != ""
  ) {
    const res = await setNetworkData(form.value);
    if (res.code === 0) {
      ElMessage({
        message: "保存成功",
        type: "success"
      });
    }
  } else {
    ElMessage.error("请选择网络连接方式");
  }
};
</script>
<style scoped lang="scss">
::v-deep .el-dialog__body {
  padding: 20px;
}

.network {
  width: 200px;
  padding: 0 10px;
  font-size: 14px;
  border-right: 1px solid #e4e7ed;
}

.box {
  display: flex;
  border: 1px solid #e4e7ed;
}
</style>
